<template>
	<div class="header">
		<div class="left">
			<el-icon class="icon" :size="24" @click="changeCollapse">
				<Expand v-if="isCollapse" />
				<Fold v-else />
			</el-icon>
			<el-breadcrumb separator="/" style="margin-left: 10px;">
				<el-breadcrumb-item v-for="(name, index) in breadcrumbList" :key="index">{{ name }}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="right">用户</div>
	</div>
</template>

<script setup lang="ts">
import { Expand, Fold } from '@element-plus/icons-vue'
import { toRefs, computed } from 'vue';
import { useMainStore } from '@/stores';
import { menu } from '@/router/menu';
import { getNodeName } from '@/utils';

const store = useMainStore();
const { isCollapse, activeMenu } = toRefs(store);

const breadcrumbList = computed(() => {
	const name = getNodeName(menu, {
		filterVal: activeMenu.value.path,
		findKey: 'path',
		returnKey: item => item.meta.title,
		returnParentName: true
	})
	return name.split('/');
})

const changeCollapse = () => {
	store.setIsCollapse(!isCollapse.value);
}

</script>

<style lang="scss" scoped>
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;

	.left {
		display: flex;
		align-items: center;

		.icon {
			cursor: pointer;
		}
	}
}
</style>